<template>
<!-- 这里iscenter是属性名,center是接收的值
默认是false,
对于样式,可以采用数组和对象同时存在的方式 -->
  <div
  v-show="isShow"
   class="my-alert"
   :class="[`my-alert--${type}`, {'is-center': center} ]"
   >
    <!-- 内容 -->
    <div class="my-alert__content">
      <span class="my-alert__title">
        <slot>提示信息</slot>
      </span>
      <!-- 关闭按钮 -->
      <i v-if="closable"
      @click="hideAlert"
      class="my-alert__closebtn iconfont icon-close"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-alert',
  data () {
    return {
      // 控制叉号按钮显示与否
      isShow: true
    }
  },
  methods: {
    hideAlert () {
      this.isShow = false
    }
  },
  props: {
    // 传递的参数
    // 注意传递的参数的类型不同,在父组件中使用传递的时候用法也不同
    // 比如字符串形式的就不需要在前面加上: 但是布尔值形式的就需要加上: 否则就不会生效
    type: {
      // 类型
      type: String,
      default: 'info',
      validator (value) {
        return ['success', 'warning', 'info', 'error'].includes(value)
      }
    },
    // 是否可以关闭
    closable: {
      type: Boolean,
      default: true
    },
    // 是否居中
    center: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less">
.my-alert {
  width: 100%;
  padding: 8px 16px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
  // 成功
  &.my-alert--success {
    background-color: #f0f9eb;
    color: #67c23a;
  }
  // 信息
  &.my-alert--info {
    background-color: #f4f4f5;
    color: #909399;
  }
  // 警告
  &.my-alert--warning {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
  // 错误
  &.my-alert--error {
    background-color: #fef0f0;
    color: #f56c6c;
  }
  // 是否居中
  &.is-center {
    justify-content: center;
  }
  .my-alert__content {
    display: table-cell;
    padding: 0 8px;
  }
  .my-alert__title {
    font-size: 13px;
    line-height: 18px;
  }
  .my-alert__closebtn {
    font-size: 12px;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
    &::before {
      color: #c0c4cc;
    }
  }
}
</style>
